<!--
 * @Author: wangshiyang
 * @Date: 2023-06-19 13:39:59
 * @LastEditors: wangshiyang
 * @LastEditTime: 2023-06-19 13:44:54
 * @Description: 请填写简介
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://unpkg.com/@antv/l7'></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        const { PolygonLayer,Popup } = L7;
        const token = 'pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
        mapboxgl.accessToken = token;
        const map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
            center: [114.38423636910653, 30.4687457655736], // starting position [lng, lat]
            zoom: 14, // starting zoom
            pitch: 70
        });

        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map,
            }),
        });
        scene.on("loaded", () => {
            // 给固定位置添加popup
            // const popup = new Popup({
            //     // 初始锚点经纬度
            //     lngLat: {
            //         lng: 114.30,
            //         lat: 30.50,
            //     },
            //     // Popup 标题
            //     title: 'Popup Title',
            //     // Popup 内容
            //     html: 'Popup Content',
            // });
            // scene.addPopup(popup);

            fetch("http://39.103.151.139:8000/gis/zhongdi").then(res => res.json())
                .then(data => {
                    const zhongdiLayer = new PolygonLayer();
                    zhongdiLayer.source(data)
                        .color("#652e80")
                        .shape("extrude")
                        // .size(200)
                        /* 可以直接获取properties中的参数 */
                        .size("people", p => {
                            console.log(p)
                            return p / 5;
                        })
                    scene.addLayer(zhongdiLayer)
                    zhongdiLayer.on("click", (evt) => {
                        let lngLat = evt.lngLat;
                        const { name, people } = evt.feature.properties;
                        const popup = new Popup({
                            // 初始锚点经纬度
                            lngLat,
                            // Popup 标题
                            // Popup 内容
                            html: `<span>公司名称: ${name}</span><br><span>总人数: ${people}</span>`,
                        });
                        scene.addPopup(popup);
                    })
                    console.log(zhongdiLayer)
                })
        })
    </script>
</body>

</html>